import { View, Text, SwiperItem } from "@tarojs/components";
import { size } from "lodash";
import { useEffect, useState } from "react";
import { AtActionSheet, AtActionSheetItem } from "taro-ui";
import timeData from "../../../../utils/generateTime";
import "./index.scss";

// 当前时间 然后往后半个小时

type optionType = {
  time: string;
  price: number;
  flag: boolean; // flag 为true 其他 那一块的内容改变
};

export default (props: any) => {
  const [current, SetCurrent] = useState<number>(0);
  const [isOpen, SetIsOpen] = useState<boolean>(false);
  const [option, SetOption] = useState<optionType>({
    time: "",
    price: 0,
    flag: false
  });
  const [timeList, setTimeList] = useState();
  useEffect(() => {
    const temp = timeData();
    const list = [];
    let index = 0;
    temp.map(item => {
      if (index > 2 || !item) {
        return;
      }
      index += 1;
      item.id = item.id + 10 + index;
      list.push(item);
    });
    setTimeList(list);
  }, [option.flag]);

  return (
    <View className="distribution_wrapper">
      {timeList &&
        timeList.map(item => {
          return (
            <View
              className={
                current == item.id
                  ? "distribution_msg_select"
                  : "distribution_msg"
              }
              onClick={() => {
                SetCurrent(item.id);
                SetOption({
                  time: item.time,
                  price: item.price,
                  flag: false
                });
                props.getExpressDate("配送时间:" + item.time + ",请按时送达");
              }}
            >
              <View style={{ fontSize: 13, marginTop: 10 }}>
                {item.time} 前
              </View>
              <View style={{ fontSize: 9, color: "#8e8b8c" }}>
                配送费:{item.price}￥
              </View>
            </View>
          );
        })}

      <View
        className={
          current == 0
            ? "distribution_msg_more_select"
            : "distribution_msg_more"
        }
        onClick={() => {
          SetCurrent(0);
          SetIsOpen(true);
        }}
      >
        {option.flag ? (
          <View>
            <View style={{ fontSize: 13, marginTop: 10 }}>
              {option.time} 前
            </View>
            <View style={{ fontSize: 9, color: "#8e8b8c" }}>
              配送费:{option.price}￥
            </View>
          </View>
        ) : (
          <View style={{ paddingTop: 17 }}>其他</View>
        )}
      </View>
      <AtActionSheet isOpened={isOpen} cancelText="取消" title="请选择配送时间">
        {timeData().map(item => {
          return (
            <AtActionSheetItem
              onClick={() => {
                SetIsOpen(false);
                SetOption({
                  time: item.time,
                  price: item.price,
                  flag: true
                });
                props.getExpressDate("配送时间:" + item.time + ",请按时送达");
              }}
            >
              {item.time}{" "}
              <Text style={{ fontSize: 10, color: "#bdc3c7" }}>
                {item.price}元
              </Text>
            </AtActionSheetItem>
          );
        })}
      </AtActionSheet>
    </View>
  );
};
